<template>
  <div>
    <section class="data_section">
      <header>数据统计</header>
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="4">
          <div class="data_list today_head"><span class="data_num head">当日数据：</span></div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getuserCount }}</span> 新增用户
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getorderCount }}</span> 新增订单
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getadminCount }}</span> 新增管理员
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="data_list all_head"><span class="data_num head">总数据：</span></div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getallUserCount }}</span> 注册用户
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getallOrderCount }}</span> 订单
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{ getallAdminCount }}</span> 管理员
          </div>
        </el-col>
      </el-row>
    </section>
    <!-- 占位符 each-->
    <Tendency :sevenDay="servenDay" :sevenDate="sevenDate"></Tendency>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import dtime from 'time-formater'
import Tendency from '../components/Tendency.vue'
import { userCount, orderCount, adminCount, allUserCount, allOrderCount, allAdminCount } from '../api/index'
export default {
  name: 'Home',
  components: { Tendency },
  data() {
    return {
      getuserCount: null,
      getorderCount: null,
      getadminCount: null,
      getallUserCount: null,
      getallOrderCount: null,
      getallAdminCount: null,
      servenDay: [],
      sevenDate: [[], [], []]
    }
  },
  mounted() {
    this.initData()
    for (let i = 8; i > -1; i--) {
      const data = dtime(new Date().getTime() - 86400000 * i).format('YYYY-MM-DD')
      this.servenDay.push(data)
    }
    this.getSeventData()
  },
  methods: {
    async initData() {
      const today = dtime().format('YYYY-MM-DD')
      Promise.all([userCount(today), orderCount(today), adminCount(today), allUserCount(), allOrderCount(), allAdminCount()])
        .then(res => {
          this.getuserCount = res[0].data.count
          this.getorderCount = res[1].data.count
          this.getadminCount = res[2].data.count
          this.getallUserCount = res[3].data.count
          this.getallOrderCount = res[4].data.count
          this.getallAdminCount = res[5].data.count
        })
        .catch(err => {
          console.log(err)
        })
    },
    async getSeventData() {
      const appArr = [[], [], []]
      this.servenDay.forEach(item => {
        appArr[0].push(userCount(item))
        appArr[1].push(orderCount(item))
        appArr[2].push(adminCount(item))
      })
      const promiseArr = [...appArr[0], ...appArr[1], ...appArr[2]]
      Promise.all(promiseArr)
        .then(res => {
          const resArr = [[], [], []]
          res.forEach((item, index) => {
            if (item.data.status === 1) {
              resArr[Math.floor(index / 9)].push(item.data.count)
            }
          })
          this.sevenDate = resArr
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less">
@import '../style/mixin';
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  header {
    display: flex;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 20px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  .all_head {
    background: #20a0ff;
  }
}
</style>
